import { StatusBar, StyleSheet, useColorScheme, View, Text, Button } from 'react-native';
import * as React from 'react';
import {
  SafeAreaProvider,
} from 'react-native-safe-area-context';
import "./global.css"
import { createStaticNavigation, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const SignInContext = React.createContext<boolean>(false);

function useIsSignedIn(): boolean {
  return React.useContext(SignInContext);
}
function useIsSignedOut(): boolean {
  return !useIsSignedIn();
}

const isSignedIn = (false);

function HomeScreen() {
  const navigation = useNavigation();
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text className="text-2xl font-bold mb-8">Home Screen2</Text>
      <Button onPress={() => navigation.navigate("Login")} title="登录" />
    </View>
  );
}

function LoginScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Login Screen</Text>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {},
  groups: {
    signedIn: {
      if: useIsSignedIn,
      screens: {
        Home: {
          screen: HomeScreen,
          options: {
            title: '主页',
          },
        },
      },
    },
    signedOut: {
      if: useIsSignedOut,
      screens: {
        Login: {
          screen: LoginScreen,
          options: {
            title: '登录',
          },
        },
      },
    },
  }
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return (
    <SafeAreaProvider>
      <SignInContext.Provider value={isSignedIn}>
        <Navigation />
      </SignInContext.Provider>
    </SafeAreaProvider>
  );
}
